<template>
  <mescroll-vue  ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit" :style="{'margin-top':marginTop+'rem'}">
    <slot></slot>
  </mescroll-vue>
</template>

<script>
  import MescrollVue from 'mescroll.js/mescroll.vue'
  export default {
    name: 'mescroller',
    props: {
      usePullDown: {
        type: Boolean,
        default: false
      }, usePullUp: {
        type: Boolean,
        default: true
      },
      pullDownCallBack: {
        type: Function,
        default: null
      },
      pullUpCallBack: {
        type: Function,
        default: null
      }, noDataText: {
        type: String,
        default: '没有更多数据了'
      }, noMoreSize: {
        type: Number,
        default: 5
      }, toTopSrc: {
        type: String,
        default: '../../static/images/mescroll-totop.png'
      }, scrollInitCallback: {
        type: Function,
        default: null
      },onScroll:{
        type: Function,
        default: null
      }
      /*,page:{
        type:Object,
        default:{
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 10
        }
      }*/
    },
    data () {
      return {

        marginTop:0,
        mescroll: null, // mescroll实例对象
        mescrollDown: {
          use: this.usePullDown,
          callback: this.downCallback,
        }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
        mescrollUp: { // 上拉加载的配置.
          use: this.usePullUp,
          callback: this.upCallback,
          htmlNodata: '<p class="upwarp-nodata">' + this.noDataText + '</p>',
          noMoreSize: this.noMoreSize //如果列表已无数据,可设置列表总数大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        }
      }
    }, beforeRouteEnter (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
      next(vm => {
        // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
        vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
      })
    },
    beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
      // 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteLeave方法
      this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
      next()
    },
    watch: {},
    computed: {},
    components: {MescrollVue},
    methods: {
      upCallback(page,mescroll){
        if (this.pullUpCallBack){
         // console.log("下拉来了",mescroll)
          this.pullUpCallBack(page.num,mescroll)
        }

      },
      downCallback(page,mescroll){
        if (this.pullDownCallBack)
          this.pullDownCallBack(page,mescroll)
      },
      mescrollInit (mescroll) {
        this.mescroll = mescroll
        if (this.scrollInitCallback) {
          this.scrollInitCallback(mescroll)
        }
      }
    },
    created () {
    },
    mounted () {
      if(this.marginTop===0 && document.getElementsByClassName('x-top-header').length!==0){
        this.marginTop=1.2 //当前node存在viewheader
      }
    },destroyed () {
      console.log("组件croll销毁")
      this.mescroll.destroyed()
    }
  }
</script>

<style scoped>

</style>
